<template>
  <div class="register">
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../assets/l_jt.png" alt>
      <span>注册</span>
    </div>
    <div class="logo">
      <img src="../assets/logo.png" alt>
    </div>
    <div v-if="step">
      <div class="m-input-box">
        <input v-model="mobile" class="m-input" type="text" placeholder="请输入邮箱号" maxlength="20">
      </div>
      <div class="m-input-box">
        <input v-model="password" class="m-input" type="password" placeholder="登录密码" maxlength="16">
      </div>
      <div class="m-input-box">
        <input v-model="con_pass" class="m-input" type="password" placeholder="确认密码" maxlength="16">
      </div>
      <div class="m-input-box">
        <input v-model="code" class="m-input" type="password" placeholder="邀请码（必填）" maxlength="5">
      </div>
      <div class="btn-box">
        <button class="red_btn" @click="next">下一步</button>
      </div>
    </div>
    <Verify
      style="margin-top:.4rem"
      v-if="modalShow"
      @success="send_code()"
      @error="error()"
      :barSize="{width:'100%',height:'40px'}"
      :showButton="false"
      :type="3"
    ></Verify>
    <div v-if="codeShow" class="m-input-box" style="margin-top:.8rem;position:relation">
      <input v-model="get_code" class="m-input" type="text" placeholder="请输入验证码" maxlength="20">
      <div v-html="djs" @click="send_code" class="send_code"></div>
    </div>
    <div v-if="modalShow" class="save-line-box">
      <i class="fl">
        <img @click="chooseImg" :src="simg" alt>
      </i>
      <span @click="showPopup('myPopup')">
        我已阅读并同意
      《万通启元 用户协议》
      </span>
    </div>
    <div v-if="modalShow" class="btn-box">
      <button class="red_btn" @click="register">注册</button>
    </div>
    <div class="other-link">
      <p style="color:#e56337;">
        <router-link to="/register">手机注册</router-link>
      </p>
      <p class="fixed-bottom">
        <span class="f_bold">已有万通启元账号？</span>
        <router-link to="/" class="register">账号登录</router-link>
      </p>
    </div>
    <cube-popup type="my-popup" ref="myPopup" maskClosable="true">
      <div class="xy_content">
        我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议我是协议
      </div>
    </cube-popup>
  </div>
</template>

<script>
import Verify from "vue2-verify";
import { setInterval } from "timers";

export default {
  name: "register",
  components: {
    Verify
  },
  data() {
    return {
      istrue: true,
      simg: require("../assets/ywxz.png"),
      mobile: "",
      password: "",
      con_pass: "",
      code: "",
      get_code: "",
      modalShow: false,
      step: true,
      djs: "",
      codeShow: false
    };
  },
  methods: {
    rerender: function() {
      this.modalShow = false;
      setTimeout(() => {
        this.modalShow = true;
      }, 10);
    },
    next() {
      this.step = false;
      this.modalShow = true;
    },
    chooseImg() {
      if (this.istrue) {
        this.simg = require("../assets/yxz.png");
      } else {
        this.simg = require("../assets/ywxz.png");
      }
      this.istrue = !this.istrue;
    },
    showPopup(refId) {
      const component = this.$refs[refId]
      component.show()

    },
    send_code() {
      var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!this.mobile)
        return this.$createToast({ txt: "请输入邮箱", type: "txt" }).show();
      if (!reg.test(this.mobile)) {
        return this.$createToast({ txt: "请输入正确邮箱", type: "txt" }).show();
      }
      this.codeShow = true;
      this.$axios
        .post("/index/publics/sendEmail", { mobile: this.mobile })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({ txt: "发送成功", type: "txt" }).show();
            this.djs = "60s";
            var timer = setInterval(() => {
              var num1 = parseInt(this.djs);
              if (num1 <= 1) {
                this.djs = "重新发送";
                clearInterval(timer);
              } else {
                this.djs = --num1 + "s";
              }
            }, 1000);
          } else {
            this.rerender();
            this.$createToast({ txt: res.data.message, type: "txt" }).show();
          }
        });
    },
    register() {
      var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!this.mobile)
        return this.$createToast({ txt: "请输入邮箱号", type: "txt" }).show();
      if (!reg.test(this.mobile)) {
        return this.$createToast({
          txt: "请输入正确邮箱号",
          type: "txt"
        }).show();
      }
      if (!this.code)
        return this.$createToast({ txt: "请输入邀请码", type: "txt" }).show();
      if (!this.password)
        return this.$createToast({ txt: "请输入密码", type: "txt" }).show();
      if (!this.con_pass)
        return this.$createToast({ txt: "请输入确认密码", type: "txt" }).show();
      if (this.password !== this.con_pass) {
        return this.$createToast({ txt: "两次密码不一致", type: "txt" }).show();
      }
      if (this.istrue) {
        return this.$createToast({ txt: "请勾选用户协议", type: "txt" }).show();
      }
      this.$axios
        .post("/index/publics/doRegister", {
          type:2,
          mobile: this.mobile,
          password: this.password,
          invite_code: this.code,
          code: this.get_code
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({ txt: res.data.msg, type: "txt" }).show();
            setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          } else {
            this.rerender();
            alert(res.data.message);
          }
        });
    }
  }
};
</script>
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.register {
  .logo {
    img {
      width: 2.266667rem;
      height: 2.266667rem;
    }
  }
  .send_code {
    position: absolute;
    right: 0;
    top: 1rem;
    font-size: 0.373333rem;
    color: #e56337;
  }
  .save-line-box {
    text-align: left;
    padding: 0.373333rem 0 1.12rem;
    color: #aab2ca;
    .icon-check {
      margin-right: 5px;
    }
  }
  padding: 0 0.4rem;
  .header-warpper {
    .f-flex();
    height: 1.333333rem;
    padding: 0;
    color: #000;
    img {
      width: 0.213333rem;
      height: 0.373333rem;
    }
    span {
      font-size: 0.48rem;
      padding-left: 0.2rem;
    }
  }
  .btn-box {
    padding-top: 1.173333rem;
  }
  .other-link {
    text-align: center;
    font-size: 0.426667rem;
    a {
      color: #e56337;
    }
    .fixed-bottom {
      padding-top: 1.706667rem;
    }
    .f_bold {
      color: #aab2ca;
      font-weight: bold;
    }
    p {
      padding-top: 0.6rem;
    }
  }
  .save-line-box {
    .f-flex();
    img {
      width: 0.453333rem;
    }
  }
}
</style>
